import {Component} from 'react'
class TodoList extends Component{
    constructor (props) {
        super(props)
        this.state={
            todo:'',
            todoList:[],
            flag:true,
            unDoneNumber:0,
        }
    }
    getTodo(e){
        console.log(e);
        this.setState({
            todo:e.target.value
        })
    }
    // 添加按钮
    confirm(){
        if(!this.state.todo.trim()){
            alert("输入内容不能为空")
            return
        }
        this.setState({
            todoList:[...this.state.todoList,{id:Date.now(),task:this.state.todo,done:true,isEdit:false}]
        })
        this.setState({
            todo:''
        })
    }
    // 按enter键 添加
    addByEnter(e){
        if(e.keyCode==13){
            this.confirm()
        }
    }
    // 删除按钮
    deleteTodoList(id){
        this.setState({
            todoList:this.state.todoList.filter(item=>item.id!==id)
        })
    }
    // 单选按钮
    radioChange(todo){
        this.setState({
            todoList:this.state.todoList.map(item=>{
                if(todo==item){
                    item.done=!todo.done
                }
                return item
            })
        })
    }
    // 全选与反选
    allChecked(flag){
        this.setState({
            todoList:this.state.todoList.map(item=>{
                item.done=!flag
                return item
            })
        })
        this.setState({
            flag: !flag
        })
    }
    // 清除已完成
    clearAllDone(){
        this.setState({
            todoList:this.state.todoList.filter(item=>!item.done)
        })
    }
    // 编辑按钮
    edit(todo){
        this.setState({
            todoList:this.state.todoList.map(item=>{
                if(todo==item){
                    item.isEdit=!todo.isEdit
                }
                return item
            })
        })
    }
    // 编辑内容
    editTask(todo,e){
        console.log(e);
        this.setState({
            todoList:this.state.todoList.map(item=>{
                if(todo==item){
                    item.task=e.target.value
                }
                return item
            })
        })
    }
    // 结束编辑
    editDone(todo,e){
        if(e.keyCode==13){
            if(!todo.task.trim()){
                alert("输入内容不能为空")
                return
            }
            this.setState({
                todoList:this.state.todoList.map(item=>{
                    if(todo==item){
                        item.isEdit=!item.isEdit
                    }
                    return item
                })
            })

        }
    }
    render(){
        let {todo,todoList,flag,unDoneNumber}=this.state
        console.log("reander...");
        return(
            <div>
                <input type="checkbox" checked={ flag?'checked':''} onChange={()=>{this.allChecked(flag)}} />
                <input 
                type="text" value={todo} 
                onChange={(e)=>{this.getTodo(e)}} 
                onKeyUp={(e)=>{this.addByEnter(e)}}
                />
                <button onClick={(e)=>{this.confirm(e)}} >添加</button>
                <hr/>
                <div>
                    {
                        todoList.map((item,index,arr)=>(
                            
                            <div key={item.id}>
                                <div style={{display:(!item.isEdit ?'block':'none')}} >
                                    <input type="checkbox" checked={item.done?'checked':''} onChange={()=>{this.radioChange(item)}}/>
                                    <span>{item.id}</span>
                                    <span>---</span>
                                    <span>{item.task}</span>
                                    <span>---</span>
                                    <button onClick={()=>{this.deleteTodoList(item.id)}}>删除</button>
                                    <button onClick={()=>{this.edit(item)}}>编辑</button>
                                </div>
                               
                                <input 
                                    type="text" value={item.task}
                                    onChange={(e)=>{this.editTask(item,e)}} 
                                    onKeyUp={(e)=>{this.editDone(item,e)}}
                                    style={{display:(item.isEdit ?'block':'none')}} />
                                <hr />
                            </div>
                            
                        ))
                        
                    }
                </div>
                <div>
                    <span>{unDoneNumber}uncompleted-</span>
                    <span >-all-</span>
                    <span >-active-</span>
                    <span >-completed-</span>
                    <span onClick={()=>{this.clearAllDone()}}>清除已完成</span>
                </div>
            </div>
        )
    }
}
export default TodoList
